<template>
  <div class="staffManagement">
    <el-row class="staffManagement-a height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{staffManagement.staffList}}</span>
    </el-row>
    <el-row class="staffManagement-b">
      <!-- 工具条 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline toolbar"
        style="padding-bottom:0px;"
        @submit.native.prevent
      >
      <el-row>
        <el-col :span="16">
          <el-form-item>
          <el-button class="addBtn boxShadowButton" icon="el-icon-circle-plus" @click="handleAdd">{{staffManagement.staffAddTwo}}</el-button>
        </el-form-item>
        <el-form-item :label="staffManagement.find">
          <el-input
            v-model.trim="formInline.workerName"
            :placeholder="staffManagement.inputStaffName"
            @keyup.enter.native.prevent="enterSearchMember"
            style="width:260px;"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="searchBtn boxShadowButton" 
          @click="search">{{staffManagement.search}}</el-button>
        </el-form-item>
        </el-col>
        <el-col :span="8" align="right">
          <el-form-item>
            <el-button class="prevPage boxShadowButton" :disabled="pageNum==firstPage" @click="handlePrevPage">{{staffManagement.prevPage}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="nextPage boxShadowButton" :disabled="pageNum==lastPage" @click="handleNextPage">{{staffManagement.nextPage}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        style="width: 100%"
        :data="tableData"
        :border="false"
        v-loading="tableLoading"
        :header-cell-style="tableHeaderColor"
        :row-style="tableRowStyle"
      >
        <el-table-column align="center" :label="staffManagement.NO" min-width="50">
          <template slot-scope="scope">
            <!-- {{scope.row.userId}} -->
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="loginName" align="center" :label="staffManagement.loginID" min-width="120"></el-table-column>
        <el-table-column prop="userName" align="center" :label="staffManagement.staffName" min-width="120"></el-table-column>
        <el-table-column prop="roleName" align="center" :label="staffManagement.duty" min-width="120"></el-table-column>
        <!-- <el-table-column prop="actionName" align="center" :formatter="formatActionName" :label="staffManagement.authority" min-width="120"></el-table-column> -->
        <el-table-column :label="staffManagement.opertion" align="center" width="330">
          <template slot-scope="scope">
            <el-button class="boxShadowButton" v-if="false" :size="size" type="warning" @click="handleEdit(scope.$index, scope.row)">{{staffManagement.edit}}</el-button>
            <el-button class="detailBtn boxShadowButton" :size="size" @click="handleDetail(scope.$index, scope.row)">{{staffManagement.detail}}</el-button>
            <el-button class="deleteBtn boxShadowButton" :size="size" @click="handleDelete(scope.$index, scope.row)">{{staffManagement.delete}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalDataNumber"
        :page-size="pageSize"
        align="center"
        class="fenye">
      </el-pagination>    
    </el-row>
    
    <!-- 删除 -->
    <el-dialog
      :title="staffManagement.deleteStaff"
      :visible.sync="deletDialogVisible"
      width="30%"
      :center="true"
      >
      <h3 style="text-align:center">{{staffManagement.sureDelete}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
            class="deleteBtn boxShadowButton"
            @click="delet"
            :size="size"
          >{{$t('m.yes')}}</el-button>
        <el-button class="jiebangBtn boxShadowButton" :size="size" @click="deletDialogVisible = false">{{$t('m.no')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
export default {
  name: "StaffManagement",
  data() {
    return {
      staffManagement: this.$t("m.staffManagement"), //引入 lang 里面的字符串资源,
      size:"mini",//按钮的尺寸
      image:{juxing_Small,},
      formInline:{
        workerName:"",
      },
      tableData:[],
      tableLoading:false,//表格加载的loading
      /* 分页的 */
      currentPage:1, //初始页
      pageNum:1,//页码
      pageSize:10,//每页显示的条数
      totalDataNumber:0,//数据的总数,
      firstPage:"",//第一页
      lastPage:"",//最后一页
      deletDialogVisible:false,
      userId:"",
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods:{
    /* 
      点击查询
    */
    search(){
       console.log('aaaaaaaa');
      if(this.formInline.workerName==""){
        this.queryStaffInfo(this.pageNum=1,this.pageSize=10);
      }else{
        this.queryStaffInfo(this.formInline.workerName,this.pageNum=1,this.pageSize=10);
      }
    },

    /* 
      键盘事件 按下键盘回车 查询
    */
    enterSearchMember(e){
      console.log('回车搜索',keyCode,e);
      var keyCode = window.event? e.keyCode:e.which;
      if(keyCode==13 && this.formInline.workerName !=null){
        if(this.formInline.workerName==""){
          this.queryStaffInfo(this.pageNum=1,this.pageSize=10);
        }else{
          this.queryStaffInfo(this.formInline.workerName,this.pageNum=1,this.pageSize=10);
        }
      }
    },

    /* 
      工作人员追加
    */
    handleAdd(){
      console.log("跳转");
      sessionStorage.setItem("staffType","staffType_Add");
      bus.$emit("homePage", {
        type: "jump",
        path: "/StaffCompile",
        title: this.staffManagement.staffAdd,
      });
    },

    /* 
      修改
    */
    handleEdit(index, row){
      console.log(index,row);
    },

    /* 
      删除
    */
    handleDelete(index, row){
      console.log(index,row);
      this.userId=row.userId;
      this.deletDialogVisible = true
    },

    //确认删除
    delet(){
       this.$postJson(this.ports.staffManagement.deleteLifeByUserId+this.userId,{},this.acceptLanguage).then(res=>{
        if(res.code==200){
          this.deletDialogVisible = false;
          this.queryStaffInfo();//刷新列表
          this.$message({message:res.message,type:"success"});
        }else{
          this.$message({message:res.message,type:"error"});
        }
      })
    },

    /* 
      详情
    */
    handleDetail(index, row){
      console.log(index,row);
      console.log("跳转");
      sessionStorage.setItem("staffUserId",row.userId);
      sessionStorage.setItem("staffType","staffType_Detail");
      bus.$emit("homePage", {
        type: "jump",
        path: "/StaffCompile",
        title: this.staffManagement.staffDetail,
      });
    },

    /* 
      上一页按钮
    */
    handlePrevPage(){
      console.log(this.currentPage,this.pageNum,this.pageSize);
      this.pageNum= this.pageNum>this.firstPage ? this.pageNum-1 : this.firstPage;
      console.log(this.pageNum);
      this.queryStaffInfo(this.pageNum);
    },

    /* 
      下一页按钮
    */
    handleNextPage(){
      console.log(this.currentPage,this.pageNum,this.pageSize);
      this.pageNum= this.pageNum<this.lastPage ? this.pageNum+1 : this.lastPage;
      console.log(this.pageNum);
      this.queryStaffInfo(this.pageNum);
    },

    /* 
      查询工作人员
    */
    queryStaffInfo(){
      let params=new Object;
      params.userName=this.formInline.workerName;
      params.pageNum=this.pageNum;;
      params.pageSize=this.pageSize;
      this.tableLoading=true;
      this.$postJson(this.ports.staffManagement.queryStaffInfo,params,this.acceptLanguage).then(res=>{
        console.log(res);
        this.tableData=[];//请求之前先清空数据
        if(res.code==200){
          if(res.result.list!=null){
            this.pageSize=res.result.pageSize;
            this.currentPage=res.result.pageNum;
            this.totalDataNumber=res.result.total*1;
            this.firstPage= res.result.firstPage,//第一页
            this.lastPage= res.result.lastPage,//最后一页
            this.tableData=res.result.list;
          }else{
            this.tableData=[];
            this.pageSize=10;
            this.currentPage=1;
            this.totalDataNumber=0;
          }
        }else{
          this.tableData=[];
          this.pageSize=10;
          this.currentPage=1;
          this.totalDataNumber=0;
        }
        setTimeout(()=>{
          this.tableLoading=false;
        },1000)
      })
    },

    formatActionName(row ,column, cellValue) {
      return row.actionName==1 ? this.$t("m.staffManagement").authorityGeneral : this.$t("m.staffManagement").authorityAdvanced 
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },

    /* 
      初始页currentPage、初始每页数据数pagesize和数据data
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数 
      this.PageSize=val;
      this.queryStaffInfo();
    },

    /* 
      当前页变化
    */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryStaffInfo();
    },
  },
  created(){
    this.groupId=sessionStorage.getItem("groupId");
  },
  mounted(){
    this.queryStaffInfo();
    bus.$on("refreshStaffList",()=>{
      this.queryStaffInfo();
    })
  },
  destroyed() {
    bus.$off("refreshStaffList");
  },
  components:{
    KtButton,
  },
};
</script>
<style lang="scss" scoped>
  .staffManagement{
    padding-bottom:20px;
    .height40{
      height: 40px;
      line-height: 40px;
      .height40-span {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
        img {
          vertical-align: middle;
          margin-right: 15px;
        }
      }
    }
    .addBtn{
      color:#7e7e7e;
    }
    .searchBtn{
      background: #409efe;
      color:#ffffff;
    }
    .detailBtn{
      background: #409efe;
      color:#ffffff;
      border-radius: 5px;
    }
    .deleteBtn{
      background: #dddddd;
      color:#010101;
      border-radius: 5px;
    }
    .prevPage{
      background:#409efe;
      color:#ffffff;
    }
    .nextPage{
      background: #ffffff;
    }
  }
  /deep/ .staffManagement-b .el-form-item__label{
    padding:0 0 0 10px;
  }

</style>